<template>
  <div id="app">
    <!-- eslint-disable-next-line -->
    <ul v-for="(item, index) in renderData.data">
      <li>姓名：{{ item.uname }}，分数：{{ item.score }}</li>
    </ul>
  </div>
</template>

<script>
// 默认导出 (默认暴露)
export default {
  //该vue组件的数据源
  name: 'App',
  data() {
    return {
      renderData: {
        message: '获取数据成功',
        data: [
          {
            uname: '陈志豪',
            score: '100',
          },
          {
            uname: '沈德亮',
            score: '95',
          },
          {
            uname: '侯涵翔',
            score: '60',
          },
          {
            uname: '石益涛',
            score: '99',
          },
          {
            uname: '魏芳芳',
            score: '150',
          },
          {
            uname: '郑新新',
            score: '150',
          },
        ],
      },
    }
  },

  methods: {},
}
</script>

<style lang="less">
.box {
  height: 300px;
  width: 300px;
  background-color: rgb(255, 193, 193);
  .son {
    color: rgb(89, 0, 0);
  }
}
.btn {
  width: 250px;
}
.hhh {
  width: 50px;
  height: 50px;
  background-color: pink;
}
.hhh1 {
  width: 150px;
  height: 150px;
  background-color: rgb(180, 0, 30);
  display: flex;
  justify-content: center;
  align-items: center;
}
.hhh2 {
  width: 200px;
  height: 200px;
  background-color: rgb(60, 0, 10);
  display: flex;
  justify-content: center;
  align-items: center;
}
.img1 {
  height: 200px;
  width: 200px;
}
img {
  height: 200px;
  width: 330px;
}
</style>
